﻿.branches-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .branches-node .node-box {
        position: absolute;
        left: 0px;
        top: -6px;
        right: 0px;
        bottom: calc(var(--wf-node-line-length) - 6px);
        border: 1px dashed #BDC3C7;
    }

.branches {
    display: flex;
}

    .branches .branch-node {
        display: flex;
        margin: 0;
        padding: 0;
    }

.branch-line {
    position: relative;
    width: var(--wf-node-width);
    height: var(--wf-node-line-length);
}

    .branch-line .v-line {
        position: absolute;
        left: calc(50% - 1px);
        width: 2px;
        height: 100%;
        background-color: var(--wf-node-line-color);
    }

    .branch-line ::deep .action {
        position: absolute;
        left: calc(50% - 8px);
        background-color: var(--wf-backcolor);
    }

        .branch-line ::deep .action.add-activity-action {
            top: calc(var(--wf-node-line-length) / 2 - 8px);
        }

.branches > .first-branch-node ::deep > .sequence-node > .branch-start-node > .top > .branch-left-line > .h-line,
.branches > .first-branch-node ::deep > .sequence-node > .branch-end-node > .branch-left-line > .h-line,
.branches > .last-branch-node ::deep > .sequence-node > .branch-start-node > .top > .branch-right-line > .h-line,
.branches > .last-branch-node ::deep > .sequence-node > .branch-end-node > .branch-right-line > .h-line {
    visibility: hidden;
}

.branches > .first-branch-node ::deep > .sequence-node > .branch-start-node > .top > .branch-right-line > .h-line,
.branches > .first-branch-node ::deep > .sequence-node > .branch-end-node > .branch-right-line > .h-line,
.branches > .last-branch-node ::deep > .sequence-node > .branch-start-node > .top > .branch-left-line > .h-line,
.branches > .last-branch-node ::deep > .sequence-node > .branch-end-node > .branch-left-line > .h-line {
    visibility: visible;
}
